import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/event/index.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/ui/draw_under_line.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class MemberCenterController extends GetxController {}

class MemberCenterPage extends GetView<MemberCenterController> {
  const MemberCenterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '会员中心',
          style: StylesUtils.customTextStyle(
              fontSize: StylesUtils.fontSize18, fontWeight: FontWeight.w700),
        ),
        actions: [
          IconButton(
              onPressed: () {
                Get.toNamed(RoutePath.memberCenterQuestion);
              },
              icon: SvgUtils.assetName('u6107', width: 20, height: 20))
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.only(bottom: 30),
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              child: ListBody(
                children: [
                  Container(
                    padding: const EdgeInsets.only(top: 10, bottom: 20),
                    alignment: Alignment.center,
                    child: const CircleAvatar(
                      radius: 30,
                      backgroundImage: CachedNetworkImageProvider(
                          'https://img2.baidu.com/it/u=3875698598,3049376128&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
                    ),
                  ),
                  Center(
                    child: Text(
                      '原型大师',
                      style: StylesUtils.customTextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: StylesUtils.fontSize18,
                          color: ColorsUtils.color3333),
                    ),
                  ),
                  Container(
                    alignment: Alignment.center,
                    padding: const EdgeInsets.only(top: 15, bottom: 20),
                    child: InkWell(
                      onTap: () {
                        Get.toNamed(RoutePath.memberCenterGrow);
                      },
                      child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.center,
                        alignment: WrapAlignment.center,
                        spacing: 10,
                        children: [
                          Text(
                            '成长值',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                          ),
                          Text(
                            '7800',
                            style: StylesUtils.customTextStyle(
                                fontWeight: FontWeight.w500, color: ColorsUtils.color0000),
                          ),
                          Icon(
                            Icons.arrow_forward_ios,
                            size: 15,
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.color0000),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(left: 15, right: 15, bottom: 20),
                    alignment: Alignment.center,
                    child: CustomPaint(
                      painter: _DrawLine(x: 70),
                      child: Row(
                        children: [
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                  alignment: Alignment.center,
                                  child: SizedBox(
                                    width: 35,
                                    height: 35,
                                    child: CustomPaint(
                                      painter: _DrawCircle(),
                                      child: Center(
                                        child: SvgUtils.assetName('u6116', width: 23, height: 23),
                                      ),
                                    ),
                                  )),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '普通会员',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '100',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                  alignment: Alignment.center,
                                  child: SizedBox(
                                    width: 35,
                                    height: 35,
                                    child: CustomPaint(
                                      painter: _DrawCircle(),
                                      child: Center(
                                        child: SvgUtils.assetName('u6119', width: 23, height: 23),
                                      ),
                                    ),
                                  )),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '黄金会员',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '1000',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                  alignment: Alignment.center,
                                  child: SizedBox(
                                    width: 35,
                                    height: 35,
                                    child: CustomPaint(
                                      painter: _DrawCircle(),
                                      child: Center(
                                        child: SvgUtils.assetName('u6122', width: 23, height: 23),
                                      ),
                                    ),
                                  )),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '铂金会员',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '35000',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                  alignment: Alignment.center,
                                  child: SizedBox(
                                    width: 35,
                                    height: 35,
                                    child: CustomPaint(
                                      painter: _DrawCircle(),
                                      child: Center(
                                        child: SvgUtils.assetName('u6125', width: 23, height: 23),
                                      ),
                                    ),
                                  )),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '砖石会员',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.colorF048),
                                ),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 20),
                                alignment: Alignment.center,
                                child: Text(
                                  '50000',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color0000),
                                ),
                              )
                            ],
                          ))
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ),
            Container(
                color: Colors.white,
                margin: const EdgeInsets.only(top: 20),
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
                child: ListBody(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      padding: const EdgeInsets.only(bottom: 20),
                      child: Text(
                        '我的特权',
                        style: StylesUtils.customTextStyle(
                            fontWeight: FontWeight.w700,
                            fontSize: StylesUtils.fontSize18,
                            color: ColorsUtils.color0000),
                      ),
                    ),
                    StaggeredGrid.count(
                      crossAxisCount: 3,
                      mainAxisSpacing: 30,
                      crossAxisSpacing: 50,
                      children: [
                        ListBody(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u6139', width: 36, height: 35),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.center,
                              child: Text(
                                '满减运费',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                              ),
                            )
                          ],
                        ),
                        ListBody(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u6145', width: 33, height: 35),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.center,
                              child: Text(
                                '签到有礼',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                              ),
                            )
                          ],
                        ),
                        ListBody(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u6142', width: 35, height: 35),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.center,
                              child: Text(
                                '评价奖励',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                              ),
                            )
                          ],
                        ),
                        ListBody(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u6148', width: 36, height: 35),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.center,
                              child: Text(
                                '专享活动',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                              ),
                            )
                          ],
                        ),
                        ListBody(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u6154', width: 44, height: 35),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.center,
                              child: Text(
                                '会员特价',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                              ),
                            )
                          ],
                        ),
                        ListBody(
                          children: [
                            Container(
                              alignment: Alignment.center,
                              child: SvgUtils.assetName('u6151', width: 35, height: 35),
                            ),
                            Container(
                              margin: const EdgeInsets.only(top: 20),
                              alignment: Alignment.center,
                              child: Text(
                                '生日礼包',
                                style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ],
                )),
            Container(
              color: Colors.white,
              margin: const EdgeInsets.only(top: 20),
              child: ListBody(
                children: [
                  DrawUnderLine(
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Container(
                      height: 45,
                      padding: const EdgeInsets.only(left: 15, right: 25),
                      alignment: Alignment.centerLeft,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '我的任务',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color3333,
                                fontSize: StylesUtils.fontSize18,
                                fontWeight: FontWeight.w700),
                          ),
                          InkWell(
                            onTap: () {
                              Get.toNamed(RoutePath.memberCenterTask);
                            },
                            child: Wrap(
                              spacing: 5,
                              crossAxisAlignment: WrapCrossAlignment.center,
                              alignment: WrapAlignment.end,
                              children: [
                                Text(
                                  '更多',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color6666),
                                ),
                                Icon(
                                  Icons.arrow_forward_ios,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.color9999),
                                  size: 14,
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Container(
                      height: 70,
                      padding: const EdgeInsets.only(left: 15, right: 25),
                      alignment: Alignment.centerLeft,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '每日签到',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10),
                                child: Text(
                                  '成长值+10，贡献值+10',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Center(
                            child: TextButton(
                                onPressed: () {},
                                style: ButtonStyle(
                                    alignment: Alignment.center,
                                    fixedSize: const MaterialStatePropertyAll(Size(80, 30)),
                                    padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                    backgroundColor: MaterialStatePropertyAll(
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc)),
                                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(5.r)))),
                                child: Text(
                                  '已完成',
                                  style: StylesUtils.customTextStyle(),
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Container(
                      height: 70,
                      padding: const EdgeInsets.only(left: 15, right: 25),
                      alignment: Alignment.centerLeft,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '分享商品或专题',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10),
                                child: Text(
                                  '成长值+5，贡献值+5',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Center(
                            child: TextButton(
                                onPressed: () {
                                  Get.toNamed(RoutePath.home);
                                  eventBus.fire(HomeChangeIndexEvent());
                                },
                                style: ButtonStyle(
                                    alignment: Alignment.center,
                                    fixedSize: const MaterialStatePropertyAll(Size(80, 30)),
                                    padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                    backgroundColor: MaterialStatePropertyAll(
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(5.r)))),
                                child: Text(
                                  '去任务',
                                  style: StylesUtils.customTextStyle(),
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Container(
                      height: 70,
                      padding: const EdgeInsets.only(left: 15, right: 25),
                      alignment: Alignment.centerLeft,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '关注店铺',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10),
                                child: Text(
                                  '成长值+5，贡献值+5',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Center(
                            child: TextButton(
                                onPressed: () {
                                  Get.toNamed(RoutePath.storeList);
                                },
                                style: ButtonStyle(
                                    alignment: Alignment.center,
                                    fixedSize: const MaterialStatePropertyAll(Size(80, 30)),
                                    padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                    backgroundColor: MaterialStatePropertyAll(
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(5.r)))),
                                child: Text(
                                  '去任务',
                                  style: StylesUtils.customTextStyle(),
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Container(
                      height: 70,
                      padding: const EdgeInsets.only(left: 15, right: 25),
                      alignment: Alignment.centerLeft,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '邀请好友',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10),
                                child: Text(
                                  '成长值+5，贡献值+5',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Center(
                            child: TextButton(
                                onPressed: () {
                                  Get.toNamed(RoutePath.inviteGift);
                                },
                                style: ButtonStyle(
                                    alignment: Alignment.center,
                                    fixedSize: const MaterialStatePropertyAll(Size(80, 30)),
                                    padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                    backgroundColor: MaterialStatePropertyAll(
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(5.r)))),
                                child: Text(
                                  '去任务',
                                  style: StylesUtils.customTextStyle(),
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  DrawUnderLine(
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
                    child: Container(
                      height: 70,
                      padding: const EdgeInsets.only(left: 15, right: 25),
                      alignment: Alignment.centerLeft,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                              child: Column(
                            children: [
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 15),
                                child: Text(
                                  '完善个人信息',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color3333),
                                ),
                              ),
                              Container(
                                alignment: Alignment.centerLeft,
                                margin: const EdgeInsets.only(top: 10),
                                child: Text(
                                  '成长值+15，贡献值+15',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.color9999),
                                ),
                              )
                            ],
                          )),
                          Center(
                            child: TextButton(
                                onPressed: () {
                                  Get.toNamed(RoutePath.mineSettingInfo);
                                },
                                style: ButtonStyle(
                                    alignment: Alignment.center,
                                    fixedSize: const MaterialStatePropertyAll(Size(80, 30)),
                                    padding: const MaterialStatePropertyAll(EdgeInsets.zero),
                                    backgroundColor: MaterialStatePropertyAll(
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048)),
                                    shape: MaterialStatePropertyAll(RoundedRectangleBorder(
                                        borderRadius: BorderRadius.circular(5.r)))),
                                child: Text(
                                  '去任务',
                                  style: StylesUtils.customTextStyle(),
                                )),
                          )
                        ],
                      ),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class _DrawCircle extends CustomPainter {
  Color? color;

  _DrawCircle({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    color ??= ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc);
    Paint paint = Paint();

    paint.style = PaintingStyle.fill;
    paint.color = Colors.white;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);

    paint.style = PaintingStyle.stroke;
    paint.color = color!;
    canvas.drawCircle(Offset(size.width / 2, size.height / 2), size.width / 2, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}

class _DrawLine extends CustomPainter {
  double x;

  _DrawLine({this.x = 35});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc)
      ..strokeWidth = 1
      ..style = PaintingStyle.stroke;

    canvas.drawLine(Offset(x, x / 4), Offset(size.width - x, x / 4), paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}
